<template>
  <div>
    <a-modal
        :destroyOnClose="true"
        :visible="this.popupVisible"
        :title="this.popupTitle"
        @ok="handleOk"
        @cancel="handleCancel"
    >
      <a-form :form="form">
        <a-form-item
            label="字段名"
            :label-col="{span:6}"
            :wrapper-col="{span:18}"
        >
          <a-input
              v-decorator="['fieldName', {
                                rules: [{ required: true, message: '请输入字段名！' }],
                                initialValue: this.editData && this.editData.fieldName
                            }]"
              allowClear
              placeholder="input search text"
              style="width: 80%"
          />
        </a-form-item>
        <a-form-item
            label="显示名称"
            :label-col="{span:6}"
            :wrapper-col="{span:18}"
        >
          <a-input
              v-decorator="['label', {
                                rules: [{ required: true, message: '请输入！' }],
                                initialValue: this.editData && this.editData.label
                            }]"
              allowClear
              placeholder="input search text"
              style="width: 80%"
          />
        </a-form-item>
        <a-form-item
            label="字段类型"
            :label-col="{span:6}"
            :wrapper-col="{span:18}"
        >
          <a-select
              v-decorator="['fieldType',{
                rules: [{ required: true, message: '请选择事件时间类型！' }],
                initialValue: 'long'
              }]"
              style="width: 80%"
          >
            <a-select-option value="long">
              长整型
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
            label="是否索引"
            :label-col="{span:6}"
            :wrapper-col="{span:18}"
        >
          <a-radio-group
              v-decorator="['indexed',{
                initialValue: this.editData ? this.editData.indexed:false
              }]"
          >
            <a-radio :value="false">
              否
            </a-radio>
            <a-radio :value="true">
              是
            </a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import {mapActions, mapMutations, mapState} from 'vuex'

export default {
  name: "FieldPopup",
  data() {
    return {
      form: this.$form.createForm(this)
    }
  },
  computed: {
    ...mapState('fieldManage', ['popupVisible', 'popupTitle','editData'])
  },
  methods: {
    ...mapActions('fieldManage', ['addField', 'queryAllField', 'update']),
    ...mapMutations('fieldManage', ['setState']),
    handleOk() {
      this.form.validateFields((err, values) => {
        if (!err) {
          if (this.popupTitle == '添加') {
            this.addField(values).then(() => {
              this.queryAllField()
            })
          } else {
            this.update(values).then(() => {
              this.queryAllField()
            })
          }
          this.setState({name: 'popupVisible', value: false})
        }
      })
    },
    handleCancel() {
      this.setState({name: 'popupVisible', value: false})
    }
  }
}
</script>

<style scoped>

</style>
